/* absolute + 负margin 开始*/

.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
  position: relative;
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/
  position: absolute;;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
/* absolute + 负margin 结束*/


/* absolute + margin auto 开始*/
.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/

}
/* absolute + margin auto 结束*/



/* absolute + calc 开始*/
.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/

}
/* absolute + calc 结束*/




/* absolute + transform 开始*/
.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/

}
/* absolute + transform 结束*/

/* lineheight 开始*/
.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/

}
/* lineheight 结束*/


/* writing-mode 开始*/
.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/

}
/* writing-mode 结束*/


/* table 开始*/
.parent{
  border: 1px solid black;
  width: 300px;
  height: 300px;
  /*关键部分*/
}

.child{
  background: #108ee9;
  width: 100px;
  height: 100px;
  /*关键部分*/

}
/* table 结束*/
